<template>
	<div>
		<div v-if="dimensionType == '1'">
      <AreaCheckPage  v-model="formMod.dimensionList"  @change="handleSelect"></AreaCheckPage>
		</div>
		<template v-else>
			<div class="f-between">
				<span> 请选择要统计的数据: </span>
				<el-button type="primary" @click="visible = !visible" size="small">筛选器</el-button>
			</div>
			<el-divider content-position="right"> </el-divider>
			<div class="mt10">
				<el-space wrap>
					<el-tag v-for="tag in formMod.dimenList" :key="tag.value" class="mx-1" closable type="info" @close="handleClose(tag)">
						{{ tag.label }}
					</el-tag>
				</el-space>
			</div>
		</template>

		<el-drawer append-to-body v-model="visible" title="勾选数据" size="75%">
			<component
				:is="whichCommon[dimensionType].component"
				:tableConfig="whichCommon[dimensionType].tableConfig"
				:auth="hideAuth"
				:needPigeonhole="false"
				:moreSearchConfig="false"
				@selection-change="handleSelectionChange"
			></component>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import serviceOrg from '@/views/datacenter/basicData/serviceOrg/index.vue'
import serviceFacility from '@/views/datacenter/basicData/serviceFacility/index.vue'
import serviceOrgHome from '@/views/datacenter/basicData/serviceOrgHome/index.vue'
import { tableConfig as orgTableConfig } from '@/views/datacenter/basicData/serviceOrg/config'
import { tableConfig as faciTableConfig } from '@/views/datacenter/basicData/serviceFacility/config'
import { tableConfig as orgHomeTableConfig } from '@/views/datacenter/basicData/serviceOrgHome/config'
import AreaCheckPage from './AreaCheck.vue'

const props = defineProps<{
	modelValue?: any
	dimension?: string | number
	dimensionOption?: any
}>()

const emits = defineEmits(['update:modelValue', 'nowDimen'])

const hideAuth = {
	add: 'hide_api',
	edit: 'hide_api',
	delete: 'hide_api',
	detail: 'hide_api',
	import: 'hide_api',
	export: 'hide_api',
}

const visible = ref(false)
const dimensionType = ref('')
const whichCommon = {
	view_dpServiceFacility_page: {
		component: serviceFacility,
		tableConfig: {
			stripe: true,
			border: true,
			maxHeight: '80vh',
			columns: [
				{
					type: 'selection',
					label: '选择',
					reserveSelection: true,
				},
				...faciTableConfig.columns,
			],
		},
	},
	view_dpServiceOrgBase_list: {
		component: serviceOrg,
		tableConfig: {
			stripe: true,
			border: true,
			maxHeight: '80vh',
			columns: [
				{
					type: 'selection',
					label: '选择',
					reserveSelection: true,
				},
				...orgTableConfig.columns,
			],
		},
	},
	view_dpServiceOrgHome_page: {
		component: serviceOrgHome,
		tableConfig: {
			stripe: true,
			border: true,
			maxHeight: '80vh',
			columns: [
				{
					type: 'selection',
					label: '选择',
					reserveSelection: true,
				},
				...orgHomeTableConfig.columns,
			],
		},
	},
}
const formMod = reactive({
	dimensionList: [],
	areaDimenOption: [],
	filterCode: '',
	dimenList: [],
})

const handleSelect = () => {
	emits('update:modelValue', formMod.dimensionList)
}

const toCamel = (str) => {
	return str.replace(/([^_])(?:_+([^_]))/g, function ($0, $1, $2) {
		return $1 + $2.toUpperCase()
	})
}

const handleSelectionChange = (arr) => {
	const filterCode = toCamel(formMod.filterCode)
	formMod.dimenList = arr.map((item) => ({
		label: item.organizationName || item.soleValue || item.orgHomeName,
		value: item[filterCode] || item.creditCode || item.soleValue || item.id,
		areaName: item.areaName,
		streetName: item.streetName,
	}))
	const labels = formMod.dimenList.map((item) => item.label)
	formMod.dimensionList = labels
	handleSelect()
}
const handleClose = (tag) => {
	const index = formMod.dimenList.indexOf(tag)
	if (index !== -1) {
		formMod.dimenList.splice(index, 1)
	}
	const labels = formMod.dimenList.map((item) => item.label)
	formMod.dimensionList = labels
	handleSelect()
}

onMounted(() => {
	const tempList = props.dimensionOption?.find((item) => item.id == props.dimension) || {}
	dimensionType.value = tempList.reserve?.dimensionType
	formMod.filterCode = tempList.reserve?.filterCode
	formMod.areaDimenOption = tempList.reserve?.areaChildren.map((item) => {
		return {
			label: item.name,
			value: item.name,
		}
	})
	emits('nowDimen', tempList)
})
</script>

<style scoped></style>
